<template lang="html">
	<div class="carousel-wrap">
	    <transition-group tag="ul" class='slide-ul' name="list">
	        <li v-for="(list,index) in listshuju" :key="index" v-show="index===currentIndex" @mouseenter="stop" @mouseleave="go">
	            <!-- <a :href="list.clickUrl" > -->
	                <img :src="list" >
	            <!-- </a> -->
	        </li>
	    </transition-group>
	    <!-- <div class="carousel-items">
	        <span v-for="(item,index) in slideList.length" :class="{'active':index===currentIndex}" @mouseover="change(index)"></span>
	    </div> -->
	</div>
</template>
<script type="text/javascript">
	export default{
		props:["listshuju"],
		data(){
			return {
            currentIndex: 0,
            timer: ''
			}
		},
        methods: {
            go() {
                this.timer = setInterval(() => {
                    this.autoPlay()
                }, 2000)
            },
            stop() {
                clearInterval(this.timer)
                this.timer = null
            },
            change(index) {
                this.currentIndex = index
            },
            autoPlay() {
                this.currentIndex++
                if (this.currentIndex > this.listshuju.length - 1) {
                    this.currentIndex = 0
                }
            }
        },
       created() {
         this.$nextTick(() => {
           this.timer = setInterval(() => {
             this.autoPlay()
           }, 4000)
         })
       }
	}
</script>
<style type="text/css" lang="less">
	.carousel-wrap {
	   height: 55.3vw;
	   width: 100%;
	   overflow: hidden;
	   background-color: #fff;
	}

	.slide-ul {
	  position: relative;
	  width: 100%;
	  height: 100%;
	}

	.slide-ul li {
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}

	img {
	  width: 100%;
	  height: 100%;
	}

	.carousel-items {
	  position: absolute;
	  z-index: 10;
	  top: 380px;
	  width: 100%;
	  margin: 0 auto;
	  text-align: center;
	  font-size: 0;
	}

	.carousel-items span {
	  display: inline-block;
	  height: 6px;
	  width: 30px;
	  margin: 0 3px;
	  background-color: #b2b2b2;
	  cursor: pointer;
	}
	.carousel-items .active {
	  background-color: orange;
	}

	.list-enter-to {
	  transition: all 1s ease;
	  transform: translateX(0);
	}

	.list-leave-active {
	  transition: all 1s ease;
	  transform: translateX(-100%)
	}

	.list-enter {
	  transform: translateX(100%)
	}

	.list-leave {
	  transform: translateX(0)
	}
</style>